﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="config.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery.lazyload.min.js"></script>
    <style>
        #myDiv{height: 800px;}
        #myDiv .img{display: inline-block;width: 100px;margin: 2px;padding: 0 0 5px 0px;}
        #myDiv .img img{cursor: pointer;}
        #myDiv .img div{height: 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-left: 5px;}
        #myDiv .img.gtfive{background-color: rgba(0,0,255,0.4);}
        #control{padding: 40px 0;text-align: center;}
        #control input[type="button"]{margin: 0 30px;}
    </style>
    <script>

        $(function () {
          var serverIP = caijingdaxueip;            //要访问的Ip
          var page = 0;                             //页码
          var pagesize = 72;                        //每页条数
          $.get(serverIP + "/acvsAll?page="+ page+"&pagesize="+pagesize,function (data) {
            loadJSON(JSON.parse(data));
          })
          //人像详情点击事件
          $("body").on("click", ".caijingrenxiang", function () {
              window.open("caijingacvs1.html?id=" + $(this).data("id"))
          })
          //上一页点击事件
          $("#control .pre").click(function () {
              if (page == -1){return alert("已是第一页");}
              page--;
              $.get(serverIP + "/acvsAll?page=" + page+"&pagesize="+pagesize, function (data) {
                 $("#myDiv").empty();
                 var arcs = JSON.parse(data);
                 loadJSON(arcs)
              })
          })
          //下一页点击事件
          $("#control .next").click(function () {
                page++
                $.get(serverIP + "/acvsAll?page="+page+"&pagesize="+pagesize, function (data) {
                    console.log(data);
                    if (data == '[]'){
                        alert("最后一页")
                        page--
                    }else{
                      $("#myDiv").empty();
                        var arcs = JSON.parse(data);
                        loadJSON(arcs)
                      }
                  }
                )
            })
          //生成结果
          function loadJSON(arcs) {
            for (var i = 0; i < arcs.length; i++) {
              var $html= $(" <div class='img'>\
                    <img class = 'caijingrenxiang' height='100' width='100' data-id = '" + arcs[i]["_id"] + "' data-original='" + arcs[i].face_image_uri + "'> \
                    <div class='name'></div>\
                    <div class='personId'></div>\
                    <div class='number'>数量:"+ arcs[i]["acvs_len"] +"</div>\
                    <div class='dayCount'></div>\
                    </div>")
             arcs[i].name&&$html.find(".name").html(arcs[i]["name"]).attr("title","姓名：" + arcs[i]["name"])
             arcs[i].person_id&&$html.find(".personId").html(arcs[i]["person_id"]).attr("title","id：" + arcs[i]["person_id"])
             $("#myDiv").append($html)
            }
            $("img").lazyload();
          }
        })
    </script>
</head>
<body>
    <div id="myDiv"></div>
    <div id="control">
        <input type="button" class="pre" value="上一页">
        <input type="button" class="next" value="下一页">
    </div>
</body>
</html>